时调|标的_Flutter基础组件07Appbar

篇首语：本文由编程笔记#小编为大家整理，主要介绍了Flutter基础组件07Appbar相关的知识，希望对你有一定的参考价值。

1. 写在前面

在上篇文章中介绍了Flutter中的Image组件&＃xff0c;今天继续学习【Flutter】基础组件中的Appbar组件。

• 【基础语法合集】

【Flutter】Dart中的var、final 和 const基本使用

【Flutter】Dart数据类型之num

【Flutter】Dart数据类型之String

【Flutter】Dart的数据类型list&Map(数组和字典)

【Flutter】Dart的方法与箭头函数

【Flutter】Dart的方法中的可选参数、方法作为参数传递

【Flutter】Dart中的匿名函数、闭包

【Flutter】Dart中的类和对象

【Flutter】Dart中的构造函数

【Flutter】Dart的工厂构造方法&单例对象&初始化列表

【Flutter】Dart的类方法和对象操作符

【Flutter】Dart中的继承

【Flutter】Dart中的抽象类和接口

【Flutter】Dart中的Mixins混入你知道是什么吗&＃xff1f;

• [基础组件合集]

【Flutter】基础组件【01】Text

【Flutter】基础组件【02】Container

【Flutter】基础组件【03】Scaffold

【Flutter】基础组件【04】Row/Column

【Flutter】基础组件【05】Icon

【Flutter】基础组件【06】Image

2. Appbar

类似于我们ios里面的导航栏&＃xff0c;可以设置title&＃xff0c;左右action&＃xff0c;

一个Material Design应用程序栏&＃xff0c;由工具栏和其他可能的widget&＃xff08;如TabBar和FlexibleSpaceBar&＃xff09;组成。

2.1 Appbar属性

• leading&＃xff1a;左侧的action功能
• title&＃xff1a;标题文字。
• actions &＃xff1a;右侧的action功能&＃xff0c;也可以使用 PopupMenuButton 来显示为三个点&＃xff0c;点击后弹出二级菜单&＃xff0c;实现功能聚合。
• bottom&＃xff1a;通常是 TabBar&＃xff0c;Tab 导航栏。
• elevation&＃xff1a; 控件的 z 坐标
• flexibleSpace&＃xff1a;可以实现一些特殊的效果&＃xff0c;该属性通常在 SliverAppBar 中使用&＃xff0c;类似于android中的CollapsingToolbarLayout&＃xff0c;可以轻松实现页面头部展开、合并的效果&＃xff0c;这个组件后期会讲到。
• backgroundColor&＃xff1a; Appbar 的颜色&＃xff0c;改值通常和下面的三个属性一起使用。
• brightness&＃xff1a; Appbar 的亮度&＃xff0c;有白色和黑色两种主题&＃xff0c;默认值为 ThemeData.primaryColorBrightness。
• iconTheme &＃xff1a;Appbar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme。
• textTheme&＃xff1a;Appbar 上的文字样式。
• centerTitle&＃xff1a;标题是否居中显示&＃xff0c;默认值根据不同的操作系统&＃xff0c;显示方式不一样。
• titleSpacing&＃xff1a; 标题与其他控件的空隙
• toolbarOpacity&＃xff1a; AppBar tool区域透明度
• bottomOpacity&＃xff1a; bottom区域透明度

2.2 Appbar代码举例

• Appbar代码举例

void main()
runApp(const MyApp());

class MyApp extends StatelessWidget
const MyApp(Key? key) : super(key: key);
// This widget is the root of your application.
&＃64;override
Widget build(BuildContext context)
return const MaterialApp(
home: MyHomePage(),
);


class MyHomePage extends StatefulWidget
const MyHomePage(Key? key) : super(key: key);
&＃64;override
State<MyHomePage> createState() &＃61;> _MyHomePageState();

class _MyHomePageState extends State<MyHomePage>
&＃64;override
Widget build(BuildContext context)
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("我是AppBar"),
),
);




• 运行效果

2.3 leading代码举例

• leading相当于返回按钮

leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: ()
Navigator.pop(context);
),


2.4 actions代码举例

• actions 就是导航栏的右边&＃x1f449;按钮

actions: [
IconButton(
icon: Icon(Icons.add),
onPressed: ()
),
PopupMenuButton(
padding: EdgeInsets.all(0),
itemBuilder: (context) &＃61;> [
PopupMenuItem(
child: Row(
children: [
Icon(
Icons.person_add,
color: Colors.black,
),
Text(
&＃39;添加好友&＃39;,
style:
TextStyle(fontSize: 18,),
)
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
value: &＃39;person_add&＃39;,
),
PopupMenuItem(
child: Row(
children: [
Icon(Icons.camera_alt, color: Colors.black),
Text(
&＃39;拍照&＃39;,
style:
TextStyle(fontSize: 18,),
)
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
value: &＃39;camera&＃39;,
),
],
onSelected: (value)
switch (value)
case &＃39;person_add&＃39;:
print("点击了添加好友");
break;
case &＃39;camera&＃39;:
print("点击了拍照");
break;

,
),
]


• actions效果

2.5 bottom代码举例

• bottom就是导航栏下面的 tab,例如滑动栏那种

bottom: TabBar(
controller: _tabController,//必须配置
tabs: [
Tab(text: "页面A",),
Tab(text: "页面B",),
Tab(text: "页面C",)
],
),
),
body: TabBarView(
//必须配置
controller: _tabController,
children: [
Center(child:Text("页面A")),
Center(child:Text("页面B")),
Center(child:Text("页面C"))
],
)),


• 完整代码如下&＃xff1a;


void main()
runApp(TabControllerStu());

class TabControllerStu extends StatefulWidget
TabControllerStu(Key? key) : super(key: key);
_TabControllerStuState createState() &＃61;> _TabControllerStuState();

class _TabControllerStuState extends State<TabControllerStu> with SingleTickerProviderStateMixin
late TabController _tabController;
//销毁时调用
&＃64;override
void dispose()
super.dispose();
_tabController.dispose();

//初始化调用
&＃64;override
void initState()
super.initState();
_tabController &＃61; new TabController(length: 3, vsync: this);
_tabController.addListener(()
//点击tab回调一次&＃xff0c;滑动切换tab不会回调
if(_tabController.indexIsChanging)
print("ysl--$_tabController.index");

//点击tab时或滑动tab回调一次
if(_tabController.index.toDouble() &＃61;&＃61; _tabController.animation!.value)
print("ysl$_tabController.index");

);

&＃64;override
Widget build(BuildContext context)
return MaterialApp(
home: Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: ()
Navigator.pop(context);
),
title: Text("微信"),
actions: [
IconButton(
icon: Icon(Icons.add),
onPressed: ()
),
PopupMenuButton<String>(
padding: EdgeInsets.all(0),
itemBuilder: (context) &＃61;> [
PopupMenuItem<String>(
child: Row(
children: [
Icon(
Icons.person_add,
color: Colors.black,
),
Text(
&＃39;添加好友&＃39;,
style:
TextStyle(fontSize: 18,),
)
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
value: &＃39;person_add&＃39;,
),
PopupMenuItem<String>(
child: Row(
children: [
Icon(Icons.camera_alt, color: Colors.black),
Text(
&＃39;拍照&＃39;,
style:
TextStyle(fontSize: 18,),
)
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
value: &＃39;camera&＃39;,
),
],
onSelected: (value)
switch (value)
case &＃39;person_add&＃39;:
print("点击了添加好友");
break;
case &＃39;camera&＃39;:
print("点击了拍照");
break;

,
),
],
bottom: TabBar(
controller: _tabController,//必须配置
tabs: [
Tab(text: "页面A",),
Tab(text: "页面B",),
Tab(text: "页面C",)
],
),
),
body: TabBarView(
//必须配置
controller: _tabController,
children: [
Center(child:Text("页面A")),
Center(child:Text("页面B")),
Center(child:Text("页面C"))
],
)),
);




• 运行效果

3. 写在后面

关注我&＃xff0c;更多内容持续输出

• CSDN
• 掘金
• 简书

&＃x1f339; 喜欢就点个赞吧&＃x1f44d;&＃x1f339;

&＃x1f339; 觉得有收获的&＃xff0c;可以来一波 收藏&＃43;关注&＃xff0c;以免你下次找不到我&＃x1f601;&＃x1f339;

&＃x1f339;欢迎大家留言交流&＃xff0c;批评指正&＃xff0c;转发请注明出处&＃xff0c;谢谢支持&＃xff01;&＃x1f339;